import React from 'react';
import { Layer, Line, Rect, Text, Image, Stage } from 'react-konva';
require('moment/locale/zh-cn'); // 导入中文语言包

interface RectTextProps {
  x: number
  y: number
  text: string
  color: string
  color2: string
}
const RectText = ({ color, color2, x, y, text }: RectTextProps) => {
  // const x = 40, y = 40
  const width = 80, fontSize = 60;
  return <>

    <Rect
      x={x}
      y={y}
      width={width}
      height={width}
      strokeWidth={2}
      stroke={color} />
    <Line points={[x + width / 2, y, x + width / 2, y + width]} stroke={color} strokeWidth={1} />
    <Line points={[x, y + width / 2, x + width, y + width / 2]} stroke={color} strokeWidth={1} />
    <Line dash={[10, 5]} points={[x, y + width, x + width, y]} stroke={color} strokeWidth={1} />
    <Line dash={[10, 5]} points={[x, y, x + width, y + width]} stroke={color} strokeWidth={1} />

    <Text text={text} fill={color2} x={x + width / 2 - fontSize / 2} y={y + width / 2 - fontSize / 2} fontSize={fontSize} />
  </>
}
const Calendar1 = ({ date, text, img }: any) => {
  const color = '#a3ab82'
  const color2 = '#859c32'
  return (<Stage width={500} height={800}>
    <Layer >
      <Rect width={500} height={800} fill='#ededed' />
      <RectText color={color} color2={color2} text='早' x={40} y={50} />
      <RectText color={color} color2={color2} text='安' x={140} y={50} />
      <Text letterSpacing={8} style={{ letterSpacing: 20 }} x={40} y={150} fill={color2} text='GOOD MORNING' />
      <Rect
        x={20}
        y={20}
        width={460}
        height={700}
        strokeWidth={2}
        stroke="#a3ab82"

      />
      <Text fill={color2} text={date.format('DD')} x={300} fontSize={45} y={50} />
      <Text fill={color2} text={`${date.format('MM')} ${date.format('MMMM')}`} x={300} fontSize={20} y={100} />
      <Rect cornerRadius={8} x={300} y={125} width={74} height={30} stroke={color2} strokeWidth={1} />
      <Text fill={color2} text={date.locale('zh-cn').format('dddd')} x={307} fontSize={20} y={130} />
      <Rect x={0}
        y={0}
        width={500}
        height={800}
        strokeWidth={4}
      />
      <Image x={40} y={200} width={420} height={520} image={img} />
      <Rect
        x={40}
        y={580}
        width={420}
        height={180}
        fill='#849b31'
      />
      <Text x={100} fontSize={20} lineHeight={1.4} fill='#fff' y={620} text={text} />
    </Layer>
  </Stage>
  )
}
export default Calendar1